// 使用react函数创建组件
// 函数组件必须大写开头
// 函数必须返回内容，如果不需要渲染内容，可以返回null

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

// 函数组件
function Hello(params) {
  return <div>我是Hello组件</div>;
}

// 函数表达书，不能把它叫做函数组件
function hello(params) {
  return <div>我是hello函数</div>;
}

// 箭头函数组件，推荐
const Hello2 = () => {
  return <div>我是Hello2箭头组件</div>;
};

const divNode = (
  <>
    <Hello></Hello>
    {/* <hello></hello> */}
    {/* 函数表达式 */}
    {hello()}
    <Hello2></Hello2>
  </>
);

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(divNode);
